#app {
  opacity: 0;
  transition: opacity 0.3s;
}

#welcome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: #161616;
  color: #fff;
  transition: opacity 0.3s;
  .welcome-loading {
    width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .text {
      text-align: center;
      padding: 6px 0;
      font-size: 14px;
      color: #999;
    }
  }
}

.pyramid-loader {
  position: relative;
  width: 300px;
  height: 200px;
  display: block;
  transform-style: preserve-3d;
  transform: rotateX(-20deg);
  .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: spin 4s linear infinite;
    .side {
      width: 70px;
      height: 70px;
      /* you can choose any gradient or color you want */
      /* background: radial-gradient( #2F2585 10%, #F028FD 70%, #2BDEAC 120%); */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      transform-origin: center top;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      &.side1 {
        transform: rotateZ(-30deg) rotateY(90deg);
        background: conic-gradient(#2bdeac, #f028fd, #d8cce6, #2f2585);
      }
      &.side2 {
        transform: rotateZ(30deg) rotateY(90deg);
        background: conic-gradient(#2f2585, #d8cce6, #f028fd, #2bdeac);
      }
      &.side3 {
        transform: rotateX(30deg);
        background: conic-gradient(#2f2585, #d8cce6, #f028fd, #2bdeac);
      }
      &.side4 {
        transform: rotateX(-30deg);
        background: conic-gradient(#2bdeac, #f028fd, #d8cce6, #2f2585);
      }
    }
    .shadow {
      width: 60px;
      height: 60px;
      background: #8b5ad5;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      transform: rotateX(90deg) translateZ(-40px);
      filter: blur(12px);
    }
  }
}

@keyframes spin {
  100% {
    transform: rotateY(360deg);
  }
}
